<template>
	<ls-page page-class="z-overspread-page" title="" id="page">
	    <view class="changeName-container">
	        <view class="container-main">
	            <van-field
	            v-model="postForm.nickName"
	            clearable
	            placeholder="请输入用户名"
	            bind:click-icon="onClickIcon"
	            clear-icon="https://oss.jtmckj.com/wmp/images/center/my/i_icon_clear.png"
	            bind:input="onChange"
	            type="nickname"
	        />
	        </view>
	        <view class="changeName-container-footer">
	            <view class="footer-item" @click="confirm">
	                完成
	            </view>
	        </view> 
	    </view>
	</ls-page>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {
		ref
	} from 'vue';
	import {
		HFiveMemberAppObjProcess
	} from '@/api/public.js'
	const userInfo = ref(uni.getStorageSync('userInfo'))
	const postForm = ref({
		mobile:userInfo.value.mobile,
		nickName:userInfo.value.name,
		sex:userInfo.value.sex,
		birthday:userInfo.value.birthday,
		attachment:userInfo.value.attachment,// 头像
	})
	// onShow 的替代方法，使用 watch 来监听数据变化
	// watch(() => app.global.userInfo.name, (newName) => {
	//   postForm.nickName = newName
	// })
	
	// 提交修改
	const confirm = () => {
	  if(!postForm.value.nickName) {
	    uni.showToast({ title: '昵称不能为空', icon: 'none' })
	    return
	  }
	  if(postForm.value.nickName.length > 15){
		  uni.showToast({ title: '昵称过长，请不要超过15个字符', icon: 'none' })
		  return
	  }
	  HFiveMemberAppObjProcess({
	    functionName: 'UpdateMemberInfo_H5',
	    contentData: postForm.value,
	  }).then(res => {
	    userInfo.value.name = postForm.value.nickName
		uni.setStorageSync('userInfo',userInfo.value)
	    uni.showToast({ title: '昵称修改成功', icon: 'none' })
	    uni.navigateBack() // 返回上一页
	  })
	}

	
	
</script>

<style lang="scss" scoped>
	.changeName-container{
	    width: 100%;
		height: 100%;
		overflow: scroll;
	    position: relative;
	    .van-cell{
	        background-color: var(--mainbaccolor10) !important;
	        // border-bottom: 1px solid #2E2E2E;
	        border-radius: 16rpx;
	    }
	    .van-field__control{
	        font-family: PingFang SC;
	        font-weight: 500;
	        font-size: 32rpx !important;
	        color: var(--second--self--color) !important;
	        line-height: 32rpx !important;
	    }
	    .van-cell:after {
	        border-bottom: 1px solid #2E2E2E;
	        display: none;
	    }
	    .container-main{
	        padding: 40rpx 24rpx 0;
	    }
	    .changeName-container-footer{
	        width: calc(100% - 48rpx);
	        position: fixed;
	        bottom: 24rpx;
	        left: 24rpx;
	        .footer-item{
	            width: 100%;
	            text-align: center;
	            background: var(--dt-backcolorPink);
	            border-radius: 40rpx;
	            font-family: PingFang SC;
	            font-weight: 500;
	            font-size: 32rpx;
	            color: var(--maincolor);
	            line-height: 32rpx;
	            padding: 25rpx 0;
	        }
	    }
	}
</style>